<template>
    <view :data-theme="globPrimary">
        <u-navbar
            title="全部课程"
            title-size="36"
            :title-bold="true"
        ></u-navbar>
        <view class="course-dropdown">
            <view class="dropdown-placeholder"></view>
            <view class="dropdown-content" :class="{ hidden: dropdownZindex }">
                <u-dropdown
                    ref="uDropdown"
                    :active-color="globPrimaryColor"
                    :inactive-color="$u.color['mainColor']"
                    @open="handleDropdownOpen"
                    @close="handleDropdownClose"
                >
                    <u-dropdown-item
                        @change="handleCoursetypeChange"
                        v-model="courseTypeValue"
                        :title="courseTypeDataTitleText"
                        :options="courseTypeData"
                    ></u-dropdown-item>
                    <u-dropdown-item :title="courseCategoryDataTitleText">
                        <view class="category-wrap">
                            <scroll-view
                                scroll-y
                                scroll-with-animation
                                class="tab-view menu-scroll-view"
                                :scroll-top="scrollTop"
                            >
                                <view
                                    v-for="(item, index) in categoryList"
                                    :key="index"
                                    class="tab-item"
                                    @tap.stop="swichMenu(index)"
                                >
                                    <view
                                        v-if="current == index"
                                        :style="{
                                            background: globPrimaryColor,
                                            height: 120 + 'rpx',
                                            width: 6 + 'rpx',
                                            position: 'absolute',
                                            left: 0 + 'rpx',
                                        }"
                                    ></view>
                                    <view
                                        v-else
                                        style="
                                            height: 120rpx;
                                            width: 6rpx;
                                            position: absolute;
                                            left: 0;
                                        "
                                    ></view>
                                    <text class="u-line-1">{{
                                        item.title
                                    }}</text>
                                </view>
                            </scroll-view>
                            <block>
                                <block
                                    v-for="(item, index) in categoryList"
                                    :key="index"
                                >
                                    <scroll-view
                                        scroll-y
                                        class="right-box"
                                        v-if="current == index"
                                    >
                                        <view class="page-view">
                                            <view
                                                class="class-title"
                                                :class="[
                                                    categoryId == item.id
                                                        ? 'active'
                                                        : '',
                                                ]"
                                                @click="
                                                    categoryClickAll(item.id)
                                                "
                                            >
                                                <text>全部</text>
                                                <u-icon
                                                    name="arrow-right"
                                                ></u-icon>
                                            </view>
                                            <view
                                                class="class-item"
                                                v-for="(
                                                    item1, index1
                                                ) in item.child"
                                                :key="index1"
                                            >
                                                <view
                                                    class="item-title"
                                                    :class="[
                                                        categoryId == item1.id
                                                            ? 'active'
                                                            : '',
                                                    ]"
                                                    @click="
                                                        handleCategoryParamClick(
                                                            item1
                                                        )
                                                    "
                                                >
                                                    <text>{{
                                                        item1.title
                                                    }}</text>
                                                    <u-icon
                                                        name="arrow-right"
                                                    ></u-icon>
                                                </view>
                                                <view class="item-container">
                                                    <view
                                                        class="thumb"
                                                        v-for="(
                                                            item2, index2
                                                        ) in item1.child"
                                                        :key="index2"
                                                    >
                                                        <view
                                                            class="name"
                                                            :class="[
                                                                categoryId ==
                                                                item2.id
                                                                    ? 'active'
                                                                    : '',
                                                            ]"
                                                            @click="
                                                                handleCategoryParamClick(
                                                                    item2
                                                                )
                                                            "
                                                            >{{
                                                                item2.title
                                                            }}</view
                                                        >
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                    </scroll-view>
                                </block>
                            </block>
                        </view>
                    </u-dropdown-item>
                </u-dropdown>
            </view>
        </view>

        <view class="course-scroll">
            <edu-mescroll-body
                bottom="0"
                :bottombar="false"
                @init="mescrollInit"
                @down="refresh"
                @up="getnewList"
            >
                <view class="course-list u-rela">
                    <view class="collist">
                        <course-col
                            v-for="(item, index) in courseList"
                            :key="index"
                            :data="item"
                            @path="toLink(item.id)"
                        ></course-col>
                    </view>
                </view>
            </edu-mescroll-body>
        </view>
    </view>
</template>

<script>
import courseCol from "@/components/common/courseCol.vue";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            organId: "", //机构id
            courseList: [],
            page: 1, //请求第几页
            pageSize: 20, //每页请求的数量
            total: 0, //总共的数据条数
            loadStatus: "loadmore",
            isLoadMore: false,
            isDataEmpty: false,

            params: {},
            dropdownZindex: true,
            courseTypeValue: "",
            courseTypeDataTitleText: "课程类型",
            courseCategoryDataTitleText: "分类",
            courseTypeDataTitle: { 1: "点播", 2: "直播", 3: "面授", 4: "班级" },
            courseTypeData: [
                {
                    label: "点播",
                    value: 1,
                },
                {
                    label: "直播",
                    value: 2,
                },

                {
                    label: "班级",
                    value: 4,
                },
            ],
            current: 0,
            scrollTop: 0,
            menuHeight: 0, // 左边菜单的高度
            menuItemHeight: 0, // 左边菜单item的高度
            categoryList: [],
            categoryId: 0,
        };
    },
    components: {
        courseCol,
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            globPrimaryColor: "designSetting/getGlobThemeColor",
        }),
    },
    onLoad(option) {
        this.organId = option.id;
        this.getCategoryList();
    },
    options: { styleIsolation: "shared" },
    methods: {
        // 下拉刷新
        refresh() {
            this.mescroll.resetUpScroll();
        },

        getnewList(page) {
            this.$edu.api
                .getSchoolCourse(this.organId, {
                    ...this.params,
                    page: page.num,
                    count: page.size,
                })
                .then((res) => {
                    const { data } = res;
                    let total = data.total;
                    let list = data.data;

                    if (page.num == 1) this.courseList = [];
                    this.courseList = this.courseList.concat(list);
                    this.mescroll.endBySize(list.length, total);
                });
        },
        toLink(id) {
            this.$u.route("pageCourse/course/details", {
                id: id,
            });
        },
        // 分类
        getCategoryList() {
            this.$edu.api
                .getCategory({
                    type: 0,
                    mhm_id: this.organId,
                })
                .then((res) => {
                    const { data } = res;
                    this.categoryList = data;
                });
        },
        // 课程类型
        handleCoursetypeChange(val) {
            let course_type = val;
            this.params = { ...this.params, course_type };
            this.courseTypeDataTitleText = this.courseTypeDataTitle[val];
            this.changeAct();
        },
        // 打开
        handleDropdownOpen() {
            this.$refs.uDropdown.highlight();
            this.dropdownZindex = false;
        },
        // 关闭
        handleDropdownClose(index) {
            this.$refs.uDropdown.highlight(index);
            this.dropdownZindex = true;
        },
        // 获取一个目标元素的高度
        getElRect(elClass, dataVal) {
            new Promise((resolve, reject) => {
                const query = uni.createSelectorQuery().in(this);
                query
                    .select("." + elClass)
                    .fields({ size: true }, (res) => {
                        // 如果节点尚未生成，res值为null，循环调用执行
                        if (!res) {
                            setTimeout(() => {
                                this.getElRect(elClass);
                            }, 10);
                            return;
                        }
                        this[dataVal] = res.height;
                    })
                    .exec();
            });
        },
        // 点击左边的栏目切换
        async swichMenu(index) {
            if (index == this.current) return;
            this.current = index;
            // 如果为0，意味着尚未初始化
            if (this.menuHeight == 0 || this.menuItemHeight == 0) {
                await this.getElRect("menu-scroll-view", "menuHeight");
                await this.getElRect("tab-item", "menuItemHeight");
            }
            // 将菜单菜单活动item垂直居中
            this.scrollTop =
                index * this.menuItemHeight +
                this.menuItemHeight / 2 -
                this.menuHeight / 2;
        },
        // 一级全部按钮
        categoryClickLevel(index) {
            if (index == this.current) return;
            this.current = index;
            this.$refs.uDropdown.close();
            let category = index;
            this.params = { ...this.params, category };
            this.courseCategoryDataTitleText = "全部";
            this.changeAct();
        },
        // 二级全部按钮
        categoryClickAll(index) {
            this.categoryId = index;
            this.$refs.uDropdown.close();
            let category = index;
            this.params = { ...this.params, category };
            this.courseCategoryDataTitleText = "全部";
            this.changeAct();
        },
        // 分类
        handleCategoryParamClick(item) {
            this.categoryId = item.id;
            this.$refs.uDropdown.close();
            let category = item.id;
            this.params = { ...this.params, category };
            this.courseCategoryDataTitleText = item.title;
            this.changeAct();
        },
        // 筛选初始化分页数据
        changeAct() {
            this.mescroll.resetUpScroll(false);
            this.mescroll.scrollTo(0, 0);
        },
    },
};
</script>

<style lang="scss" scoped>
page {
    background-color: white;
}

.course-scroll {
    height: calc(100vh - 44px - 50px);
    .course-list {
        /* #ifdef H5 */
        padding: 0rpx 30rpx 30rpx;
        /* #endif */

        /* #ifdef MP-WEIXIN */
        padding: 16rpx 30rpx 0rpx 30rpx;
        /* #endif */

        /* #ifdef APP-PLUS */
        padding: 70rpx 30rpx 0rpx 30rpx;
        /* #endif */
    }
}

.content {
    height: auto;
    padding: 0 30rpx;
    z-index: 2;
}

// 分类部分
.course-dropdown {
    /* #ifdef MP-WEIXIN */
    height: 80rpx;
    width: 100%;
    /* #endif */
    .dropdown-placeholder {
        /* #ifdef H5 */
        height: 80rpx;
        /* #endif */
    }
    .dropdown-content {
        background-color: #fff;
        position: fixed;
        left: 0;
        right: 0;
        /* #ifdef H5 */
        top: 44px;
        /* #endif */
        z-index: 9999;
        &.hidden {
            overflow: hidden;
        }
        /deep/.u-dropdown__menu__item__text {
            max-width: 120rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

.category-wrap {
    display: flex;
    height: calc(100vh - 84px);
    overflow: hidden;
    background-color: #fff;
    .tab-view {
        width: 210rpx;
        height: 100%;
        background: #f7f7f7;
        .tab-item {
            height: 120rpx;
            padding: 0 10rpx;
            background: #f7f7f7;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            color: $edu-content-color;
            font-weight: 400;
            &.active {
                position: relative;
                font-size: 30rpx;
                font-weight: 500;
                color: $edu-main-color;
                background-color: #ffffff;
                &::before {
                    content: "";
                    position: absolute;
                    border-left-width: 6rpx;
                    border-left-style: solid;
                    @include border-color();
                    height: 120rpx;
                    left: 0;
                    top: 0;
                }
            }
        }
    }
    .page-view {
        padding: 30rpx;
        background-color: #fff;
        .class-title {
            font-size: 30rpx;
            font-weight: 500;
            color: $edu-main-color;
            margin-bottom: 50rpx;
            &.active {
                @include text-color();
            }
        }
        .class-item {
            border-radius: 8rpx;
            .item-title {
                font-size: 30rpx;
                font-weight: 500;
                color: $edu-main-color;
                margin-bottom: 30rpx;
                &.active {
                    @include text-color();
                }
            }
            .item-container {
                display: flex;
                flex-wrap: wrap;
                margin-left: -14rpx;
                margin-right: -14rpx;
                .thumb {
                    padding: 0 14rpx;
                    margin-bottom: 40rpx;
                }
                .name {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0 20rpx;
                    height: 64rpx;
                    background: #f7f7f7;
                    border-radius: 32px;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: $u-main-color;
                    &.active {
                        @include text-color();
                    }
                }
            }
        }
    }
}
</style>
